<script setup lang="ts">
import { computed } from 'vue'
import Cookies from 'js-cookie'
import { useI18n } from 'vue-i18n'

const { locale } = useI18n()

const language = [
  {
    value: 'en',
    label: 'English',
  },
  {
    value: 'zh-CN',
    label: '中文简体',
  },
]

const label = computed(() => {
  const value = language.find((item) => item.value == locale.value)
  if (value) {
    return value.label
  } else {
    return ''
  }
})

const handleCommand = () => {
  const lang = locale.value == 'zh-CN' ? 'en' : 'zh-CN'
  locale.value = lang
  //在选择了显示的语言后，将配置保存到Cookie中
  Cookies.set('DefaultLanguage', lang, {
    expires: new Date(new Date().getTime() + 30 * 60 * 1000),
  }) //默认cookie有效时间为30分钟
}
</script>

<template>
  <div
    class="cursor-pointer text-white sm:text-[16px] max-sm:text-[20vm]"
    title="切换语言"
    @click="handleCommand"
  >
    {{ label }}
  </div>
</template>
